<template>
	<div class="panel panel-default" style="width: 400px;margin:200px auto 0;">
		<div class="panel-heading">
			登录
		</div>
		<div class="form-group">
			<label for="username">用户名</label>
			<input type="text" class="form-control"  name="username" v-model="username" placeholder="请输入用户名...">
		</div>
		<div class="form-group">
			<label for="password">密码</label>
			<input type="password" class="form-control" name="password" v-model="pass" placeholder="请输入密码...">
		</div>
		<br>
			<button type="submit" class="btn btn-info btn-login" @click="clickLogin">登录</button>
	</div>
		
		
	</div>
</template>
<style lang="stylus" scoped>
	.form-group
		margin: 15px 15px 20px 15px;
	.btn-login
		margin: 0 300px 25px;
</style>

<script type="text/javascript">
import { mapState } from 'vuex'
	export default {
		name: 'login',
		data(){
			return {
				username:this.$store.state.username,
				pass:""
			}
		},
		mounted(){//判断从后台检验返回来的数据
			this.$sock.on('login_ret',(code,msg)=>{
				if(code){
					alert('不好意思'+msg)
				}else{//正确后，到达Home目录，不写路径path，写name
					this.$router.push({name:'Home',params:{username:this.username}})
				}
			})
		},
		methods:{
			clickLogin(){//发送密码和账户到后台，用来校验
				this.$sock.emit('login',this.username,this.pass);

				//修改公共数据username
				this.$store.commit('changUsername',this.username)
			}
		},
	}
</script>